<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>纯css实现弹窗</title>
  <style>
    body{
        background-color: yellowgreen;
    }


    .button {
      position: absolute;
      width: 6rem;
      height:1.5rem;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin:auto;
      border-radius: 0.2rem;
      background: white;
      color: black;
    }

    .modal input {
      display: none;
    }

    .modal input~* {
      overflow: hidden;
      max-height: 0;
      opacity: 0
    }

/*  */
    .modal .overlay {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: fixed;
      margin: 0;
      border-radius: 0;
      background: rgba(17, 17, 17, 0.8);
      transition: all 0.3s;
      z-index: 100000;
    }

    .modal .overlay~* {
      border: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
      z-index: 1000000;
      transition: all .3s ease;
    }

    .main {
      background: skyblue;
      padding: 10px;
    }

    .modal input:checked ~ * {
      display: block;
      opacity: 1;
      max-height: 10000px;
    }

    .modal input:checked ~ .overlay~ * {
      max-height: 90%;
      overflow: auto;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
      transform: translateX(-50%) translateY(-50%) scale(1, 1);
    }

  </style>
</head>

<body>
  <label for="modal_1" class="button">显示模态框</label>

  <div class="modal">
    <input type="checkbox" name="" id="modal_1">
    <label for="modal_1" class="overlay"></label>
    <div class="main">
      <p>
        <h1>总结</h1>
        <ul>
          <li>使用伪元素<strong>checked</strong>。input:checked	选择所有选中的表单元素</li>
          <li>铺满屏幕。 top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            position: fixed;
            margin: 0;</li>
          <li>使用过度transition。格式：transition: transition-property(规定应用过渡的 CSS 属性的名称) transition-duration(定义过渡效果花费的时间。默认是 0) transition-timing-function(规定过渡效果的时间曲线。默认是 "ease") transition-delay(规定过渡效果何时开始。默认是 0)</li>
        </ul>
        
      </p>
    </div>
  </div>

</body>

</html>